<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.terminalName }}
          </span>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
      </template>
    </header-module>

    <div class="main-content">
      <div class="list-container">
        <el-form :inline="true" label-position="right" label-width="110px" size="small" class="filter-form-inline">
          <el-row :gutter="0" style="margin-left: 20px; margin-right: 20px">
            <el-col>
              <item-title title="基本信息" />
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="营销产品：">
                <el-link type="primary" :underline="false" @click="handlToProduct">
                  {{getProductName( formData?.productInfo)}}
                </el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端名称 ：">
                <el-link type="primary" :underline="false" @click="handlToTerina"> {{ formData.terminalName }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="记账日期：">
                {{ dateFormat("yyyy-mm-dd",formData.createdAt) }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="营销数据来源：">
                <span v-if="formData.saleSource === '1'">厂家配送订单</span>
                <span v-if="formData.saleSource === '2'">商业流向记录</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="关联单据编号：">
                <el-link type="primary" @click="handlRelationNo" :underline="false">{{ formData.relationNo }}</el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item :label="formData.saleSource === '1' ?'客户下单日期：':'配送日期：'">
                {{ dateFormat("yyyy-mm-dd",formData.deliveryTime) }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="发货数量：">
                {{ formData.saleNum }}
                <span v-if="formData?.productInfo?.sellUnit ">
                 {{ getLabel('sell_unit',formData?.productInfo?.sellUnit)}}
                </span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端价：">

                <span v-if="formData.terminalPrice > 0">{{ isInteger(formData.terminalPrice) }}</span>
                <span v-if="formData?.productInfo?.sellUnit ">
                  元 /{{ getLabel('sell_unit',formData?.productInfo?.sellUnit)}}
                </span>

              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="负责营销职员：">
                {{ formData.headName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端价营销额：">
                {{ isInteger(formData.terminalAmount) }} 元
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="回款营销额：">
                {{ isInteger(formData.returnAmount) }} 元
              </el-form-item>
            </el-col>

            <el-col>
              <item-title title="进货渠道关系" />
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端名称：">
                {{ formData.terminalName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端类型：">
                {{ getLabel('app_mode', formData.terminalType) }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="终端所在地区：">
                <span v-if=" formData.provinceName">{{ formData.provinceName }}/</span> 
              <span v-if=" formData.cityName">{{ formData.cityName }}/</span> {{ formData.areaName }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="营销模式：">
                <div v-if="formData.sellMode !== 'direct'">
                  {{formData.agentAttribute === '1' ?'独家招商':'精细招商'}}
                </div>
                <div v-else> 终端直销</div>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4" v-if="formData.sellMode !== 'direct'">
              <el-form-item label="代理商名称：" v-if="formData.sellMode === 'agent'">
                <el-link type="primary" :underline="false" @click="handlToAgent"> {{ formData.agentName }}</el-link>
              </el-form-item>
              <el-form-item label="兼职名称：" v-if="formData.sellMode === 'agent_person'">
                <el-link type="primary" :underline="false" @click="handlToAgent"> {{ formData.agentInfo.userName }}
                </el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="交易价：">

                <span v-if="formData.tradePrice > 0">{{ isInteger(formData.tradePrice) }}</span>
                <span v-if="formData?.productInfo?.sellUnit ">
                  元 /{{ getLabel('sell_unit',formData?.productInfo?.sellUnit)}}
                </span>

              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="配送商：">
                <span v-if="formData.saleSource === '1'">厂家配送</span>
                <el-link type="primary" :underline="false" @click="handlToDistributeName">
                  <span v-if="formData.saleSource === '2'">{{ formData.distributeName }}</span>
                </el-link>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.saleSource === '2'" :lg="8" :xs="4">
              <el-form-item label="配送费：">
                <div v-if="formData?.distributeDetailInfo?.computeMode==='固定价格'">
                  <span>{{ formData?.distributeDetailInfo?.distributePrice }}元</span><span> /
                    {{ getLabel('sell_unit',formData.sellUnit) }}</span>
                </div>
                <div v-if="formData?.distributeDetailInfo?.computeMode==='终端价百分比'">
                  <span>{{ formData?.distributeDetailInfo?.distributePrice }}%</span><span>终端价</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>

    <!--产品详情-->
    <detail-drawer ref="proDetailDrawer" custom-title>
      <template #title>
        {{getProductName( formData?.productInfo)}}
      </template>
      <template #contents>
        <div class="drawer-content">
          <div class="history-list">
            <item-title title="基本信息" />
            <product-base-info v-if="formData.productId" :id="formData.productId" />
          </div>
          <div class="history-list">
            <item-title title="修改记录" />
            <operation-view :id="formData.productId" mode="product" />
          </div>
        </div>
      </template>
    </detail-drawer>
    <!--终端详情-->
    <detail-drawer ref="terminalRef" custom-title>
      <template #title>
        <span> {{ formData.terminalName }}</span>
      </template>
      <template #contents>
        <terminalName :id="formData.terminalId" />
      </template>

    </detail-drawer>
    <!--代理商详情-->
    <detail-drawer ref="agentRef" custom-title>
      <template #title>
        <span v-if="formData.agentType === 'agent'">{{ formData.agentName }}</span>
        <span v-if="formData.agentType === 'agent_person'">{{ formData?.agentInfo?.userName }}</span>
      </template>
      <template #contents>
        <agentInfo :id="formData.agentId" />
      </template>
    </detail-drawer>
    <!--配送商详情-->
    <detail-drawer ref="distributeNameRef" custom-title>
      <template #title>
        {{ formData.distributeName }}
      </template>
      <template #contents>
        <distributorInfo :id="formData.distributeId" />
      </template>
    </detail-drawer>
    <!--关联订单编号-->
    <detail-drawer ref="orderInfoRef" custom-title>
      <template #title>
        {{ formData.relationNo }}
      </template>
      <template #contents>
        <orderInfo :id="formData?.relationId" />
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs,} from "vue";
import {useRoute, useRouter} from "vue-router";

export default {
  name: "Index",
  components: {
    productBaseInfo: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/product/productBaseInfo.vue"
      )
    ),
    agentInfo: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/agent/agentInfo")
    ),
    terminalName: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/terminal/terminalInfo")
    ),
    distributorInfo: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/distributor/distributorInfo"
      )
    ),
    distributorServiceInfo: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/distributor/distributorServiceInfo"
      )
    ),
    orderInfo: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/order/OrderInfo.vue")
    ),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      formData: {},
      proDetailDrawer: null,
      terminalRef: null,
      agentRef: null,
      tradePriceRef: null,
      distributeNameRef: null,
      orderInfoRef: null,
    });

    const handlBack = () => {
      router.go(-1);
    };
    // 获取详情
    const handlDetail = (id) => {
      api.sellDetail.TSELLDETAIL_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.saleDetail;
        }
      });
    };

    const handlToProduct = () => {
      data.proDetailDrawer.open();
    };

    const handlToTerina = () => {
      data.terminalRef.open();
    };

    const handlToAgent = () => {
      data.agentRef.open();
    };

    const handlTradePrice = () => {
      data.tradePriceRef.open();
    };

    const handlToDistributeName = () => {
      data.distributeNameRef.open();
    };

    const handlRelationNo = () => {
      data.orderInfoRef.open();
    };

    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });
    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      handlToProduct,
      handlToTerina,
      handlToAgent,
      handlTradePrice,
      handlToDistributeName,
      handlRelationNo,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
